<template>
  <div class="tabbar">
    <ul>
      <li @click="onTabClick(0)" :class="{ active: current === '0'}">
        <div class="icon">
          <i class="icon-list"></i>
        </div>
        <div class="name">首页</div>
      </li>
      <li @click="onTabClick(1)" :class="{ active: current === '1'}">
        <div class="icon">
          <i class="icon-add"></i>
        </div>
        <div class="name">我要派奖</div>
      </li>
      <li @click="onTabClick(2)" :class="{ active: current === '2'}">
        <div class="icon">
          <i class="icon-user"></i>
        </div>
        <div class="name">我的</div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  props: {
    current: {
      type: String,
      default: '0'
    }
  },
  data () {
    return {
    }
  },
  methods: {
    onTabClick (i) {
      if (i === 0 & this.current !== '0') {
        wx.redirectTo({
          url: '/pages/index/main',
        })
      }
      if (i === 1 & this.current !== '1') {
        wx.navigateTo({
          url: '/pages/add/main',
        })
      }
      if (i === 2 & this.current !== '2') {
        wx.redirectTo({
          url: '/pages/me/main'
        })
      }
    }
  }
}
</script>

<style lang="less" scoped>
.tabbar {
  z-index: 50;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  border-top: 1rpx solid #e6ebf0;
  background-color: #fff;
  ul {
    display: flex;
    li {
      flex: 1;
      text-align: center;
      padding: 12rpx 0;
      &:active {
        background: #d8d8d8;
      }
      &.active {
        .name {
          color: #e0382f;
        }
        .icon {
          &-list {
            background-image: url("../../static/images/list-c.png");
          }
          &-add {
            background-image: url("../../static/images/add-c.png");
          }
          &-user {
            background-image: url("../../static/images/user-c.png");
          }
        }
      }
    }
  }
  .icon {
    i {
      display: block;
      width: 50rpx;
      height: 50rpx;
      background-repeat: no-repeat;
      background-position: center center;
      background-size: contain;
      margin: 0 auto;
    }
    &-list {
      background-image: url("../../static/images/list.png");
    }
    &-add {
      background-image: url("../../static/images/add.png");
    }
    &-user {
      background-image: url("../../static/images/user.png");
    }
  }
  .name {
    font-size: 26rpx;
    color: #515151;
    padding-top: 2rpx;
  }
}
</style>
